<template>
  <div class="container">
    <h3>用户登录</h3>
    <div class="picture">
      <van-image
        width="100%"
        height="100%"
        fit="contain"
        :src="require('../../assets/images/dagerhandbyhand.png')"
      />
    </div>
    <div class="loginbody">
      <van-form >
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          autocomplete="off"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div class="info">
          <van-button plain type="info" @click="login(username,password)">提交</van-button>
        </div>

    </van-form>
    </div>
  </div>

</template>

<script>
import Cookies from 'js-cookie'
import { loginMethod } from '@/api/login'
import { getUserMethod } from '@/api/getUserById'
export default {
  name: 'LoginIndex',
  data () {
    return {
      username: '',
      password: '',
      age: '',
      gender: '',
      dsc: '',
      isLogin: null
    }
  },
  mounted () {
    this.isLogin = this.$store.state.isLogin
    const username = this.getCookie('username')
    const password = this.getCookie('password')
    if (username != null && password != null) {
      this.getUser(username)
    }
  },
  methods: {
    getCookie (name) {
      // 获取名为 'myCookie' 的 cookie 的值
      return Cookies.get(name)
    },
    setCookie (name, value) {
      // 设置一个名为 'myCookie' 的 cookie，值为 'someValue'，有效期为 1 天
      Cookies.set(name, value, { expires: 1 })
    },
    async getUser (usernmae) {
      // 获取用户信息
      const userRes = await getUserMethod(usernmae)
      this.username = userRes.data.username
      this.age = userRes.data.age
      this.gender = userRes.data.gender
      this.dsc = userRes.data.dsc
      this.$store.commit('saveUsername', this.username)
      this.$store.commit('saveDsc', this.dsc)
      this.$store.commit('saveGender', this.gender)
      this.$store.commit('saveAge', this.age)
      this.$router.push('/user')
    },
    async login (username, password) {
      // 登录
      const loginRes = await loginMethod(username, password)
      this.$store.commit('saveId', loginRes.data.id)
      this.$store.commit('changeIsLogin')
      this.$store.commit('saveUsername', this.username)
      console.log('响应数据 = ')
      console.log(loginRes.data)
      // 将token存入cookie
      const token = loginRes.data.token
      this.setCookie('token', token)
      // 将用户和密码存入cookie
      this.setCookie('username', this.username)
      this.setCookie('password', this.password)
      // 将是否发送请求所有视频分类请求判断数存入仓库
      this.$store.commit('saveAllCategory', '1')
      // 获取用户信息
      const userRes = await getUserMethod(this.username)
      this.username = userRes.data.username
      this.age = userRes.data.age
      this.gender = userRes.data.gender
      this.dsc = userRes.data.dsc
      this.$store.commit('saveUsername', this.username)
      this.$store.commit('saveDsc', this.dsc)
      this.$store.commit('saveGender', this.gender)
      this.$store.commit('saveAge', this.age)
      this.$router.push('/user')
      this.$toast({
        message: '登陆成功',
        position: 'top'
      })
    }

  }
}

</script>

<style lang="less" scoped>
  .info{
    font-size: 20px;
    margin-left: 38%;
    margin-top: 40px;
  }
</style>
